<template>
	<scroll-view class="container" scroll-y="true">
		<!-- 轮播图 -->
		<view class="card">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" 
				:circular="true"class="swiper">
				<swiper-item v-for="(item, index) in imgList" :key="index">
					<image 
						:src="item" 
						mode="aspectFit" 
						class="swiper-image" 
						@error="onImageError(item)" 
					/>
				</swiper-item>
			</swiper>
		</view>

		<!-- 富文本内容 -->
		<view class="card">
			<text class="section-title">泉州介绍</text>
			<rich-text :nodes="richTextContent" class="rich-content"></rich-text>
		</view>

		<!-- 进度条 -->
		<view class="card">
			<text class="section-title">探索进度</text>
			<text class="progress-text">当前进度: {{ progress }}%</text>
			<progress :percent="progress" stroke-width="8" color="#007AFF" active class="progress-bar" />
		</view>

		<!-- 城市选择 -->
		<view class="card">
			<text class="section-title">选择城市</text>
			<button @click="showCityPicker = true" class="picker-btn">
				{{ selectedCityText || '请选择城市' }}
			</button>
			<picker 
				mode="multiSelector" 
				:range="cityPickerRange" 
				:value="cityPickerValue" 
				@change="onCityChange"
				@columnchange="onCityColumnChange" 
				@cancel="showCityPicker = false" 
				:visible="showCityPicker"
			>
				<view></view>
			</picker>
		</view>

		<!-- 偏好设置 -->
		<view class="card">
			<text class="section-title">偏好设置</text>
			<view class="radio-group">
				<radio-group @change="onTransportChange">
					<label class="radio-item" v-for="item in transportOptions" :key="item.value">
						<radio :value="item.value" :checked="transport === item.value" />
						<text>{{ item.label }}</text>
					</label>
				</radio-group>
			</view>
			<view class="switch-item">
				<text class="switch-label">显示推荐景点</text>
				<switch v-model="showRecommended" color="#007AFF" />
			</view>
			<view class="slider-item">
				<text class="slider-label">探索半径: {{ radius }}km</text>
				<slider 
					v-model="radius" 
					:min="1" 
					:max="50" 
					step="1" 
					activeColor="#007AFF" 
					backgroundColor="#e5e5e5"
					@change="onRadiusChange" 
				/>
			</view>
		</view>

		<!-- 视频 -->
		<view class="card">
			<text class="section-title">泉州宣传</text>
			<video 
				:src="videoSrc" 
				class="video-player" 
				controls 
				playsinline 
				webkit-playsinline 
				x5-playsinline
				@play="onPlay" 
				@pause="onPause" 
				@error="onError"
			></video>
		</view>
	</scroll-view>
</template>

<script>
export default {
	data() {
		return {
			imgList: [
				'/static/quanzhou/city1.png',
				'/static/quanzhou/city2.jpg',
				'/static/quanzhou/city3.jpg',
				'/static/quanzhou/city4.jpg',
				'/static/quanzhou/city5.jpg'
			],
			richTextContent: `
        <p style="margin: 0 0 0.8rem; font-size: 1.125rem; font-weight: bold; color: #2c3e50; line-height: 1.4;">
          海上丝绸之路起点 - 泉州
        </p>
        <p style="margin: 0 0 0.8rem; font-size: 1rem; color: #555; line-height: 1.6;">
          历史文化：
          <span style="color: #e67e22;">泉州是国务院批准公布的24个历史文化名城之一</span>，
          是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。
        </p>
        <p style="margin: 0 0 0.8rem; font-size: 1rem; color: #555; line-height: 1.6;">
          <strong style="font-weight: bold;">著名景点：</strong>
          清源山、开元寺、泉州港、崇武古城
        </p>
        <p style="margin: 0; font-size: 1rem; color: #555; line-height: 1.6;">
          <strong style="font-weight: bold;">民俗文化：</strong>
          闽南文化、
          <span style="color: #9b59b6;">木偶戏</span>
          和
          <span style="color: #3498db;">南音</span>
          被列为国家级非物质文化遗产。
        </p>
      `,
			progress: 60,
			areaData: [{
				name: '福建省',
				cities: [{
						name: '福州市',
						districts: ['鼓楼区', '台江区', '仓山区', '晋安区', '马尾区', '长乐区']
					},
					{
						name: '泉州市',
						districts: ['鲤城区', '丰泽区', '洛江区', '泉港区', '惠安县', '安溪县', '永春县', '德化县']
					},
					{
						name: '厦门市',
						districts: ['思明区', '湖里区', '集美区', '海沧区', '同安区', '翔安区']
					},
					{
						name: '漳州市',
						districts: ['芗城区', '龙文区', '龙海区', '云霄县', '漳浦县']
					},
					{
						name: '莆田市',
						districts: ['城厢区', '涵江区', '荔城区', '秀屿区']
					}
				]
			}],
			cityPickerValue: [0, 1, 1],
			cityPickerRange: [[], [], []],
			selectedCityText: '福建省 - 泉州市 - 丰泽区',
			showCityPicker: false,
			transport: 'bus',
			transportOptions: [{
					value: 'bus',
					label: '公交'
				},
				{
					value: 'car',
					label: '自驾'
				},
				{
					value: 'walk',
					label: '步行'
				}
			],
			showRecommended: true,
			radius: 12,
			videoSrc: '/static/quanzhou/city-video.mp4'
		}
	},
	onLoad() {
		this.initCityPicker()
	},
	methods: {
		initCityPicker() {
			const provinces = this.areaData.map(p => p.name)
			const cities = this.areaData[0].cities.map(c => c.name)
			const districts = this.areaData[0].cities[this.cityPickerValue[1]].districts
			this.cityPickerRange = [provinces, cities, districts]
			this.updateSelectedCityText()
		},
		onCityColumnChange(e) {
			const { column, value } = e.detail
			const newRange = [...this.cityPickerRange]
			const newValue = [...this.cityPickerValue]
			newValue[column] = value

			if (column === 0) {
				const cities = this.areaData[value].cities.map(c => c.name)
				const districts = this.areaData[value].cities[0].districts
				newRange[1] = cities
				newRange[2] = districts
				newValue[1] = 0
				newValue[2] = 0
			} else if (column === 1) {
				const cityIdx = value
				const districts = this.areaData[0].cities[cityIdx].districts
				newRange[2] = districts
				newValue[2] = 0
			}

			this.cityPickerRange = newRange
			this.cityPickerValue = newValue
		},
		onCityChange(e) {
			const [p, c, d] = e.detail.value
			const province = this.cityPickerRange[0][p]
			const city = this.cityPickerRange[1][c]
			const district = this.cityPickerRange[2][d]
			this.selectedCityText = `${province} - ${city} - ${district}`
		},
		updateSelectedCityText() {
			const [p, c, d] = this.cityPickerValue
			if (
				this.cityPickerRange[0][p] &&
				this.cityPickerRange[1][c] &&
				this.cityPickerRange[2][d] !== undefined
			) {
				this.selectedCityText =
					`${this.cityPickerRange[0][p]} - ${this.cityPickerRange[1][c]} - ${this.cityPickerRange[2][d]}`
			}
		},
		onTransportChange(e) {
			this.transport = e.detail.value
		},
		onRadiusChange(e) {
			this.radius = e.detail.value
		},
		onPlay() {
			console.log('视频开始播放')
		},
		onPause() {
			console.log('视频暂停')
		},
		onError(e) {
			console.error('视频播放出错:', e.detail.errMsg)
			uni.showToast({
				title: '视频加载失败',
				icon: 'none'
			})
		},
		onImageError(src) {
			console.warn(`图片加载失败: ${src}`)
			uni.showToast({
				title: '图片加载失败',
				icon: 'none',
				duration: 1500
			})
		}
	}
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
  /* #ifdef H5 */
  max-width: 1200px;
  margin: 0 auto;
  /* #endif */
}

.card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 24rpx;
  display: block;
}

.swiper {
  width: 100%;
  height: 360rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #f0f0f0;
  /* #ifdef H5 */
  height: min(40vh, 500rpx);
  /* #endif */
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.rich-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #555;
}

.progress-text {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.progress-bar {
  margin-top: 8rpx;
}

.picker-btn {
  width: 100%;
  text-align: left;
  background-color: #f8f9fa;
  border: 1px solid #eaeaea;
  border-radius: 16rpx;
  padding: 24rpx;
  font-size: 28rpx;
  color: #444;
  box-sizing: border-box;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 30rpx;
  margin-bottom: 24rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #555;
}

.radio-item radio {
  transform: scale(0.8);
  margin-right: 12rpx;
}

.switch-item,
.slider-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.switch-label,
.slider-label {
  font-size: 28rpx;
  color: #444;
  flex: 1;
}

.slider-label {
  min-width: 160rpx;
}

.slider-item slider {
  flex: 2;
  margin-left: 20rpx;
}

.video-player {
  width: 100%;
  height: 360rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #000;
  /* #ifdef H5 */
  height: min(40vh, 500rpx);
  /* #endif */
}
</style>